<script setup>
import commonForm from './commonForm.vue';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  //配置列表
  optionList: {
    type: Array,
    default: []
  },
  //回显数据
  optionData: {
    type: Object,
    default: {}
  },
  //表头
  title: {
    type: String,
    default: ''
  },
  //是否展示重置按钮
  hasReset:{
    type:Boolean,
    default:false
  }
  
})

const emit = defineEmits(['closeDialog'])

const handleClose = () => {
  emit('closeDialog')
}

const drawer = computed(() => props.visible)

//表单校验规则
const optionRuleList = ref({})

const formRef = ref(null)
const formData = ref({})

const updateFormData = (data) => {
  formData.value = data
}

const reset = () => {
  formRef.value.resetForm()
}

watchEffect(() => {

  console.log('%c [  ]-50', 'font-size:13px; background:pink; color:#bf2c9f;', props.optionData)
})

</script>

<template>
  <div class="drawer">
    <el-drawer v-model="drawer" direction="ttb" :close-on-click-modal="false" :close-on-press-escape="false"
      :destroy-on-close="true" :show-close="false" size="100%">
      <div class="drawer-body">
        <el-card>
          <template #header>
            <div class="card-header">
              <h1>{{ props.title }}</h1>
            </div>
          </template>

          <commonForm class="card-main" ref="formRef" :optionList="props.optionList" :optionRuleList="optionRuleList"
            :optionData="props.optionData" @updateFormData="updateFormData">
          </commonForm>
          <template #footer>
            <div class="card-footer">
              <div class="btn-group">
                <el-button class='btn-red' @click='handleClose'>关闭</el-button>
                <el-button class="btn-blue" @click='reset' v-if="props.hasReset"> 重置</el-button>
                <!-- 自定义按钮功能插槽 -->
                <slot name="btnGroup" :scope="formData"></slot>
              </div>
            </div>
          </template>
        </el-card>
      </div>
    </el-drawer>
  </div>
</template>

<style lang="scss" scoped>
.drawer-body {
  height: 100%;


  :deep(.el-card) {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .card-header {
    text-align: center;
    font-size: 24px;
    letter-spacing: 2px;
    color: #656565;
  }

  :deep(.el-card__body) {
    display: flex;
    justify-content: center;
    flex: 1;

  }

  .card-footer {
    :deep(.el-button) {
      color: #fff;
      width: 100px;
      height: 35px;
      font-size: 16px;
      border-color: #c6c6c6;
    }

    .btn-group {
      display: flex;
      gap: 10px;
      justify-content: center;
    }
  }


}

:deep(.el-drawer__header) {
  margin: 0;
  padding: 0;
}
</style>